<template>
	<view class="container">
		<u-form :model="form" :rules="rules" ref="uForm" label-width="200">
			<!-- 商机描述 -->
			<!-- <u-form-item :label="fields.busiOppoId.label" :prop="fields.busiOppoId.prop" required>
				<u-input v-model="form.busiOppoId" :disabled="isDetail" placeholder="请输入商机描述" />
			</u-form-item> -->

			<!-- 跟踪人 -->
			<!-- <u-form-item :label="fields.traceMan.label" :prop="fields.traceMan.prop" required>
				<u-input v-model="form.biz1" :disabled="isDetail" type="select" placeholder="请选择跟踪人"  @click="personCurrShow = true"/>
			</u-form-item> -->

			<!-- 跟踪时间 -->
			<u-form-item :label="fields.traceTime.label" :prop="fields.traceTime.prop" right-icon="calendar-fill" required>
				<u-input v-model="form.traceTime" :disabled="isDetail" type="datetime" placeholder="请选择跟踪时间"
					@click="isDetail ? null : showTimePicker = true" />
			</u-form-item>

			<!-- 跟踪描述 -->
			<u-form-item :label="fields.traceDesc.label" :prop="fields.traceDesc.prop" required>
				<u-input v-model="form.traceDesc" :disabled="isDetail" type="textarea" placeholder="请输入跟踪描述" />
			</u-form-item>

			<!-- 跟踪类型 -->
			<u-form-item :label="fields.traceKind.label" :prop="fields.traceKind.prop" required>
				<u-radio-group v-model="form.traceKind" :disabled="isDetail">
					<u-radio v-for="item in traceKindOptions" :key="item.value" :name="item.label"
						>{{item.label}}</u-radio>
				</u-radio-group>
			</u-form-item>

			<!-- 跟踪状态 -->
			<!-- <u-form-item :label="fields.traceStauts.label" :prop="fields.traceStauts.prop">
				<u-input v-model="form.traceStauts" :disabled="isDetail" type="select" placeholder="请选择" @click="statusSelectShow = true" />
			</u-form-item> -->

			<!-- 关联单号 -->
			<!-- <u-form-item :label="fields.relBillNo.label" :prop="fields.relBillNo.prop">
				<u-input v-model="form.relBillNo" :disabled="isDetail" placeholder="请输入关联单号" />
			</u-form-item> -->

			<!-- 联系电话 -->
			<u-form-item :label="fields.relConnectTel.label" :prop="fields.relConnectTel.prop" required>
				<u-input v-model="form.relConnectTel" :disabled="isDetail" placeholder="请输入联系电话" />
			</u-form-item>

			<!-- 客户反馈意见 -->
			<u-form-item :label="fields.cusFeedback.label" :prop="fields.cusFeedback.prop" required>
				<u-input v-model="form.cusFeedback" :disabled="isDetail" type="textarea" placeholder="请输入客户反馈意见" />
			</u-form-item>
		</u-form>
		<map id="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		<!-- 底部按钮 -->
		<view class="footer" v-if="!isDetail">
			<u-button type="primary" @click="submitForm">提交</u-button>

		</view>
		<view class="footer" v-else>
			<u-button type="primary" @click="submitForm">送样品</u-button>
			<u-button style="margin-left: 20rpx;" @click="resetForm">下订单</u-button>
			<u-button style="margin-left: 20rpx;" @click="">转正式客户</u-button>
		</view>

		<u-select v-model="statusSelectShow" :list="traceStatusOptions"></u-select>
		<u-picker mode="time" v-model="showTimePicker" :params="timeParams" @confirm="timeConfirm"></u-picker>
		<u-select v-model="personCurrShow" :list="personList" @confirm="currConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面模式：'add' 新增，'detail' 详情
				mode: 'add',
				statusSelectShow: false,
				personCurrShow: false,
				personList: [],
				latitude: '',
				longitude: '',
				covers: [{
					id: 0,
					height: 30,
					width: 20,
					latitude: '',
					longitude: '',
				}],
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				// 时间选择器显示控制
				showTimePicker: false,
				// 表单字段配置
				fields: {
					busiOppoId: {
						label: '商机描述',
						prop: 'busiOppoId',
						search: true
					},
					traceMan: {
						label: '跟踪人',
						prop: 'traceMan'
					},
					traceTime: {
						label: '跟踪时间',
						prop: 'traceTime'
					},
					traceDesc: {
						label: '跟踪描述',
						prop: 'traceDesc'
					},
					traceKind: {
						label: '跟踪类型',
						prop: 'traceKind'
					},
					traceStauts: {
						label: '跟踪状态',
						prop: 'traceStauts'
					},
					relBillNo: {
						label: '关联单号',
						prop: 'relBillNo'
					},
					relConnectTel: {
						label: '联系电话',
						prop: 'relConnectTel'
					},
					cusFeedback: {
						label: '客户反馈意见',
						prop: 'cusFeedback'
					}
				},
				// 跟踪类型选项
				traceKindOptions: [
					{label : "售前",value: '售前'},
					{label : "售中",value: '售中'},
					{label : "售后",value: '售后'},
				],
				// 表单数据
				form: {
					busiOppoId: '',
					traceMan: '',
					traceTime: '',
					traceDesc: '',
					traceKind: '售前',
					traceStauts: '',
					relBillNo: '',
					relConnectTel: '',
					cusFeedback: '',
					biz1: ''
				},
				// 表单验证规则
				rules: {
					busiOppoId: [{
						required: true,
						message: '请输入商机描述',
						trigger: 'blur'
					}],
					traceMan: [{
						required: true,
						message: '请输入跟踪人',
						trigger: 'blur'
					}],
					traceDesc: [{
						required: true,
						message: '请输入跟踪描述',
						trigger: 'blur'
					}],
					traceTime: [{
						required: true,
						message: '请选择跟踪时间',
						trigger: 'change'
					}],
					cusFeedback: [{
						required: true,
						message: '请输入客户反馈意见',
						trigger: 'blur'
					}],
					relConnectTel: [{
							required: true,
							message: '请输入联系电话',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (!/^1[3-9]\d{9}$/.test(value)) {
									callback(new Error('手机号格式不正确'))
								} else {
									callback()
								}
							},
							trigger: 'blur'
						}
					],
					traceTime: [{
						required: true,
						message: '请选择跟踪时间',
						trigger: 'change'
					}]
				}
			}
		},
		computed: {
			// 是否是详情模式
			isDetail() {
				return this.mode === 'detail'
			}
		},
		onLoad(options) {
			console.log(options);
			let _this = this;
			uni.getLocation({
				type: 'wgs84', //返回可以用于uni.openLocation的经纬度
				success: function (res) {
					console.log("res111",res);
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
					_this.covers[0].latitude = res.latitude;
					_this.covers[0].longitude = res.longitude;
					// uni.openLocation({
					// 	latitude: _this.latitude,
					// 	longitude: _this.longitude,
					// 	success: function (op) {
					// 		console.log('success');
					// 	},
					// 	fail: (e) => {
					// 		console.log(e);
					// 	}
					// });
				}
			});
			// 根据传入参数判断模式
			if (options.mode) {

				this.mode = options.mode
				this.form.busiOppoId = options.crmBusiOppo;
				this.$api.user.getBaseEmpPage({

				}).then((res) => {
					console.log("res",res);
					this.personList = [];
					res.records.forEach((item) => {
						this.personList.push(
							{
								value: item.empNo,
								label: item.empName
							}
						)
					})
				})
				// 如果是详情模式，获取数据
				if (this.isDetail) {
					this.getDetailData(options.id)
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 获取详情数据
			getDetailData(id) {
				// 这里应该是从接口获取数据
				// 模拟数据
				const mockData = {
					busiOppoId: 'BO20230001',
					traceMan: '张三',
					traceTime: '2023-06-15 14:30',
					traceDesc: '客户对产品A很感兴趣，需要进一步沟通细节',
					traceKind: 'visit',
					traceStauts: 'requirement',
					relBillNo: 'SO20230001',
					relConnectTel: '13800138000',
					cusFeedback: '希望看到更详细的产品演示'
				}

				this.form = mockData
			},
			timeConfirm(param){
				console.log(param);
				this.form.traceTime = param.year + '-' + param.month + '-' + param.day + ' ' + param.hour + ':' + param.minute + ':' + param.second
			},
			currConfirm(params){
				this.form.traceMan = params[0].value
				this.form.biz1 = params[0].label
			},

			// 提交表单
			submitForm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 表单验证通过，提交数据
						console.log('表单数据:', this.form)
						if(this.form.id){
							this.$api.user.updBusiOppo({
								...this.form
							}).then((res) => {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})

								// 提交成功后返回上一页
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							})
						}else{
							this.$api.user.addBusiOppoTrace({
								...this.form,
								id: this.wfy.uuid(32),
								traceStauts: '1',
								crmBusiOppo: this.form.busiOppoId,
								biz1: this.form.biz1,
								biz2: this.latitude,
								biz3: this.longitude
							}).then((res) => {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})
								// 提交成功后返回上一页
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							})
						}
					} else {
						console.log('验证失败')
					}
				})
			},

			// 重置表单
			resetForm() {
				this.$refs.uForm.resetFields()
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.u-form-item {
		margin-bottom: 20rpx;
	}
	.footer {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	#map{
		width: 680rpx;
		height: 400rpx;
		margin: 20rpx 15rpx;
	}
</style>
